<template>
  <div v-if="data._isInit">
    <el-collapse-item :title="$t('基础配置')" name="1">
      <el-form-item :label="$t('标题')">
        <el-input v-model="config.title"></el-input>
      </el-form-item>
    </el-collapse-item>
    <el-collapse-item :title="$t('数据配置')" name="2">
      <el-form-item :label="$t('数据视图')">
        <l-dbsource-select
          v-model="config.dataCode"
          @change="handleDataSourceChange"
          @init="handleDataSourceInit"
        />
      </el-form-item>
      <el-form-item :label="$t('维度')">
        <l-select v-model="config.labelKey" :options="fieldOptions" />
      </el-form-item>
      <el-form-item :label="$t('指标')">
        <l-select v-model="config.valueKey" :options="fieldOptions" />
      </el-form-item>
      <el-form-item :label="$t('目标值')">
        <l-select v-model="config.valueKey1" :options="fieldOptions" />
      </el-form-item>
    </el-collapse-item>
    <el-collapse-item :title="$t('柱状百分图设置')" name="3">
      <el-form-item :label="$t('横向')">
        <el-switch v-model="bar.isX" />
      </el-form-item>
      <el-form-item :label="$t('柱条宽度')">
        <el-input-number
          v-model="bar.barWidth"
          :min="0"
          controls-position="right"
        ></el-input-number>
      </el-form-item>

      <el-divider>{{ $t('占比') }}</el-divider>
      <el-form-item :label="$t('颜色')">
        <l-input-color v-model="bar.color" />
      </el-form-item>
      <el-form-item :label="$t('渐变底色')">
        <l-input-color v-model="bar.color2" />
      </el-form-item>
      <el-divider>{{ $t('占比选中') }}</el-divider>
      <el-form-item :label="$t('颜色')">
        <l-input-color v-model="bar.scolor" />
      </el-form-item>
      <el-form-item :label="$t('渐变底色')">
        <l-input-color v-model="bar.scolor2" />
      </el-form-item>
      <el-divider>{{ $t('整体') }}</el-divider>
      <el-form-item :label="$t('颜色')">
        <l-input-color v-model="bar.zcolor" />
      </el-form-item>
      <el-form-item :label="$t('渐变底色')">
        <l-input-color v-model="bar.zcolor2" />
      </el-form-item>
      <el-divider>{{ $t('整体选中') }}</el-divider>
      <el-form-item :label="$t('颜色')">
        <l-input-color v-model="bar.zscolor" />
      </el-form-item>
      <el-form-item :label="$t('渐变底色')">
        <l-input-color v-model="bar.zscolor2" />
      </el-form-item>
    </el-collapse-item>
    <el-collapse-item :title="$t('文本标签')" name="4">
      <el-form-item :label="$t('是否显示')">
        <el-switch v-model="label.show" />
      </el-form-item>
      <template v-if="label.show">
        <el-form-item :label="$t('文本颜色')">
          <l-input-color v-model="label.color" />
        </el-form-item>
        <el-form-item :label="$t('文本位置')">
          <l-select
            :clearable="false"
            :options="[
              { value: 'insideTop', label: '里面' },
              { value: 'top', label: '外面' },
            ]"
            v-model="label.position"
          />
        </el-form-item>
        <el-form-item :label="$t('文本粗细')">
          <l-select
            :clearable="false"
            :options="labelFontWeightOptions"
            v-model="label.fontWeight"
          />
        </el-form-item>
        <el-form-item :label="$t('字体大小')">
          <el-input-number
            v-model="label.fontSize"
            :max="24"
            :min="12"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item :label="$t('格式文本')">
          <el-input class="l-input-icon" v-model="label.formatter">
            <template slot="append">
              <el-popover
                placement="top-start"
                title="参数说明"
                width="400"
                trigger="hover"
              >
                <p><span style="color: #ff0033">{a}</span>：系列名。</p>
                <p><span style="color: #ff0033">{b}</span>：数据名。</p>
                <p><span style="color: #ff0033">{c}</span>：数据值。</p>
                <p><span style="color: #ff0033">{d}</span>：百分比。</p>
                <p>
                  <span style="color: #ff0033">{@xxx}</span>：数据中名为
                  <span style="color: #ff0033">'xxx'</span> 的维度的值，如
                  <span style="color: #ff0033">{@product}</span> 表示名为<span
                    style="color: #ff0033"
                    >'product'</span
                  >
                  的维度的值。
                </p>
                <p>
                  <span style="color: #ff0033">{@[n]}</span>：数据中维度
                  <span style="color: #ff0033">n</span> 的值，如
                  <span style="color: #ff0033">{@[3]}</span>表示维度 3 的值，从
                  0 开始计数。
                </p>
                <el-button
                  slot="reference"
                  icon="learun-icon-circle-question"
                />
              </el-popover>
            </template>
          </el-input>
        </el-form-item>
      </template>
      <el-form-item :label="$t('百分比')">
        <el-switch v-model="percentLabel.show" />
      </el-form-item>
      <template v-if="percentLabel.show">
        <el-form-item :label="$t('百分比颜色')">
          <l-input-color v-model="percentLabel.color" />
        </el-form-item>
        <el-form-item :label="$t('百分比位置')">
          <l-select
            :clearable="false"
            :options="[
              { value: 'insideBottom', label: '左' },
              { value: 'inside', label: '中' },
              { value: 'insideTop', label: '右' },
            ]"
            v-model="percentLabel.position"
          />
        </el-form-item>
        <el-form-item :label="$t('百分比粗细')">
          <l-select
            :clearable="false"
            :options="labelFontWeightOptions"
            v-model="percentLabel.fontWeight"
          />
        </el-form-item>
        <el-form-item :label="$t('百分比大小')">
          <el-input-number
            v-model="percentLabel.fontSize"
            :max="24"
            :min="12"
            controls-position="right"
          />
        </el-form-item>
      </template>
    </el-collapse-item>
    <el-collapse-item :title="$t('网格设置')" name="11">
      <el-form-item :label="$t('包含坐标')">
        <el-switch v-model="grid.containLabel" />
      </el-form-item>
      <el-form-item :label="$t('左边距')">
        <el-slider v-model="grid.left" />
      </el-form-item>
      <el-form-item :label="$t('右边距')">
        <el-slider v-model="grid.right" />
      </el-form-item>
      <el-form-item :label="$t('上边距')">
        <el-input-number
          v-model="grid.top"
          :min="0"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item :label="$t('下边距')">
        <el-input-number
          v-model="grid.bottom"
          :min="0"
          controls-position="right"
        />
      </el-form-item>
    </el-collapse-item>
  </div>
</template>
<script>
import configMixins from "../mixins/config";
export default {
  mixins: [configMixins()],
  computed: {
    bar() {
      return this.series.bar;
    },
    grid() {
      return this.echarts.grid;
    },
    percentLabel(){
      return this.series.percentLabel;
    }
  },
  data() {
    return {};
  },
  methods: {
    init(data) {
      const config = {
        echarts: {
          grid: {
            left: 10,
            top: 60,
            right: 10,
            bottom: 60,
            containLabel: false,
          },

          series: {
            itemStyle: {},

            percentLabel:{
              show: false,
              color: "",
              position: "",
              fontWeight: "",
              formatter: "",
            },

            label: {
              show: true,
              color: "",
              position: "",
              fontWeight: "",
              formatter: ""
            },
            bar: {
              isX: true, // 默认横向
              barWidth:null
            },
          },
        },
        // 数据配置
        dataCode: "",
        labelKey: "",
        valueKey: "",
      };
      this.commonInit(data, config);
    },
    clearKeys() {
      this.config.labelKey = "";
      this.config.valueKey = "";
    },
  },
};
</script>

